<!--
 * @Author: 灰灰
 * @Date: 2022-01-07 11:56:20
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2022-01-10 15:31:14
 * @Description: 公共表格  
 tableCols: {
    prop: '',
    label: '',
    showOverflowTooltip: true,
    filterType: '',
    format: '',
    width: '',
    minWidth: '',
    render: '', 自定义格式方法
 },
 dataList 数据
-->
<template>
  <el-table :id="tableId"
            :data="dataList"
            :height="height"
            :stripe="stripe"
            :border="border"
            @selection-change="handlerSelectionChange">

    <el-table-column v-if="$listeners.selectionChange"
                     type="selection"
                     :selectable="selectable"
                     width="55"></el-table-column>
    <!-- 序号 -->
    <el-table-column v-if="indexName"
                     :label="indexName"
                     :align="align"
                     width="50"
                     type="index"></el-table-column>
    <slot name="front"></slot>
    <el-table-column :prop="item.prop"
                     :label="item.label"
                     :align="align"
                     v-for="(item, index) in tableCols"
                     :key="item.prop"
                     :show-overflow-tooltip="item.showOverflowTooltip"
                     :width="overflowCol(index) ? overflowCol(index).colWidth : item.width"
                     :min-width="item.minWidth || minWidth">
      <template slot-scope="{row, $index}">
        <span v-if="item.render">
          {{item.render(row, $index)}}
        </span>
        <span v-else>
          {{ row[item.prop] | valueFormat(item.filterType, item.format) }}
        </span>
      </template>
    </el-table-column>
    <slot></slot>
  </el-table>
</template>

<script>
import { exportTableToExcel } from '@/utils/exportFile'
export default {
  props: {
    tableId: {
      type: String,
      default: 'tableId'
    },
    indexName: '',
    border: {
      type: Boolean,
      default: true
    },
    stripe: {
      type: Boolean,
      default: true
    },
    dataList: {
      type: Array,
      require: true,
      default: () => [],
    },
    tableCols: {
      type: Array,
      require: true,
      default: () => []
    },
    align: {
      type: String,
      default: 'center'
    },
    minWidth: {
      type: String,
      default: '80px'
    },
    height: {
      type: [String, Number],
      default: 'auto'
    },
    // 选中框
    selectable: {
      type: Function
    },
    // 溢出列 colIndex ， colWidth
    overflowCols: {
      type: Array,
      default: () => []
    }
  },
  data () {
    return {

    }
  },
  methods: {
    overflowCol (index) {
      // 溢出列
      const col = this.overflowCols.find(item => item.colIndex === index)
      return col
    },
    exportFile (title, callback) {
      exportTableToExcel(['#' + this.tableId], title, callback)
    },
    handlerSelectionChange (item) {
      this.$emit('selectionChange', item);
    }
  }
}
</script>

<style>
</style>